"use client"
import Window from "@/components/Props/Windows";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useEffect, useState } from "react";

const Email = () => {
const [mounted, setMounted] = useState(false)
  const pathname = usePathname()

  useEffect(() => {
      setMounted(true)
    }, [])
    
  return (
    <div
      style={{
        backgroundImage: "url('/01.webp')", // 替换为实际背景图路径
        backgroundSize: "cover",
        backgroundPosition: "center",
        width: "100%",
        height: "100vh",
        position: "absolute",
        top: 0,
        left: 0,
        zIndex: 10,
      }}
    >
      {/* 底部文字框 */}
<div
  style={{
    position: "absolute",
    top: 0,
    width: "80vw",
    height: "10vh",
    color: "gold", // 设置字体为金色
    fontWeight: "bold", // 加粗字体
    textAlign: "center", // 居中文字
    zIndex: 3,
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
  }}
>
  <p style={{ fontSize: "48px" }}>
    {mounted && <Link href={`${pathname}/profile`}>差分宇宙专场</Link>}
  </p>
</div>
      {/* 图片窗口 */}
      <div
        style={{
          position: "absolute",
          width: "50vw", // 图片窗口占据屏幕宽度的一半
          height: "100vh",
          bottom: 0,
          left: 0, // 图片窗口靠左
          zIndex: 1,
          backgroundImage:
            "url('https://fastcdn.mihoyo.com/content-v2/hkrpg/155181/9dfe02d106baa45d286b85ad67a714b9_9178069785443545376.png')",
          backgroundSize: "contain", // 让图片自适应整个 div
          backgroundRepeat: "no-repeat", // 防止图片重复
          backgroundPosition: "center", // 居中显示图片
        }}
      />
      {/* 视频窗口 */}
      <Window
        top={100}
        left={600} // 视频窗口从屏幕中间开始
        bottom={200}
        right={500} // 视频窗口靠右
      >
        <video
          src="https://fastcdn.mihoyo.com/mi18n/hkrpg_cn/m20250310hy4btvr7r4/upload/867d289175443652310196dc362c4b49_5341317160490537080.mp4" // 替换为实际视频路径
          controls
          autoPlay
          loop
          style={{
            width: "100%",
            height: "100%",
            objectFit: "cover",
            position: "absolute",
            zIndex: 2,
          }}
        />
      </Window>
      {/* 右侧文字框 */}
      <div
        style={{
          position: "absolute",
          top: "20%",
          right: "2%",
          width: "20vw",
          height: "60vh",
          backgroundColor: "rgba(237, 233, 235, 0.8)", // 半透明背景
          border: "1px solid #ccc",
          borderRadius: "8px",
          padding: "16px",
          zIndex: 3,
          overflowY: "auto",
        }}
      >
        <h2 style={{ fontSize: "18px", fontWeight: "bold", marginBottom: "8px",color: "#e49ceb" }}>
          差分宇宙说明
        </h2>
        <p>劲量打</p>
      </div>
      {/* 底部文字框 */}
     {/* 底部文字框 */}
<div
  style={{
    position: "absolute",
    bottom: "2%",
    left: "10%",
    width: "80vw",
    height: "10vh",
    color: "gold", // 设置字体为金色
    fontWeight: "bold", // 加粗字体
    textAlign: "center", // 居中文字
    zIndex: 3,
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
  }}
>
  <p style={{ fontSize: "32px" }}>
    未成年禁止消费。
  </p>
</div>
    </div>
    
  );
};

export default Email;